<template>
  <div class="content">
    <el-card class="card">
      <!-- <div class="list-title">
        <span>现状调洪演算结果</span>
      </div> -->
      <el-form inline :model="form">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            v-model="form.startTime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            v-model="form.endTime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        stripe
        class="ans-table el-table-box"
        :data="list"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="elevation" label="滩顶高程(m)"></el-table-column>
        <el-table-column
          prop="normalWaterLevel"
          label="正常运行水位(m)"
        ></el-table-column>
        <el-table-column prop="waterMark" label="洪水位(m)"></el-table-column>
        <el-table-column
          prop="safeHeight"
          label="安全超高(m)"
        ></el-table-column>
        <el-table-column
          prop="floodHeight"
          label="调洪高度(m)"
        ></el-table-column>
        <el-table-column
          prop="capacity"
          label="调洪库容(万m³)"
        ></el-table-column>
        <el-table-column
          prop="beachLength"
          label="干滩长度(m)"
        ></el-table-column>
        <el-table-column
          prop="releaseFloodFlow"
          label="最大下泄流量(m³/s)"
        ></el-table-column>
        <el-table-column prop="theDate" label="演算时间"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { getFloodRoutingHistoryByPage } from "../../../api/api";
import moment from "moment";
export default {
  name: "FloodCalculusData",
  components: {},
  props: {
    tailingPondId: Number,
    require: true,
  },
  data() {
    return {
      query: {
        page: 1,
        pagesize: 10,
      },
      total: null,
      taipondId: null,
      form: {
        startTime: moment().subtract(31, "d").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().add(1, "days").format("YYYY-MM-DD HH:mm:ss"),
      },
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await getFloodRoutingHistoryByPage({
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        pageSize: this.query.pagesize,
        pageCount: this.query.page,
        tailingPondId: this.taipondId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.list = res.parameter.list;
        this.total = res.parameter.total;
        console.log(this.list);
        this.list.forEach((item) => {
          console.log(item);
          for (let key in item) {
            if (key !== "id" && key !== "theDate" && key !== "tailingPondId") {
              let x = String(item[key]).indexOf(".");

              let y = String(item[key]).length - x;
              if (y === 2) {
                item[key] = String(item[key]) + 0;
              } else if (y > 2) {
                item[key] = Number(item[key]).toFixed(2);
              }
              // console.log(key, x, item[key], y)
            }
          }
        });
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
  watch: {
    tailingPondId: {
      handler(newName, oldName) {
        this.taipondId = this.tailingPondId;
        // this.getWarningMannge()
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped>
.content {
  margin: 0;
  padding: 0;
  height: 87vh;
  width: 99%;
  margin-right: 5px;
}
.el-card__body {
  padding: 0 !important;
}
.card {
  width: 100%;
  /* background: red; */
  height: 100%;
  display: block;
  overflow: auto;

  /* margin-bottom: 0.5vh; */
}
/* .list-title {
  padding: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-indent: 2em;
  font-size: 14px;
  margin: -10px 0 10px -10px;
  background-color: #f0f0f0;
} */
.el-pagination {
  float: right;
  margin-top: 10px;
}
/* .list-title > span {
  margin:-5px 5px 5px 25px;
  font-size: 1.1em;
} */
.el-table-box {
  display: block;
  height: 65vh;
  overflow-y: auto;
  margin-bottom: 20px;
}
.el-table::before {
  z-index: inherit;
}
</style>